<template>
  <div  class="mask" v-show="isShow">
    <div class="loading">
      <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgn-static01.ams3.digitaloceanspaces.com%2Fassets%2Fimages%2Floader.gif&refer=http%3A%2F%2Fgn-static01.ams3.digitaloceanspaces.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630154739&t=268ba20ad0f4d1871a3b1987c152b905" alt="">
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShow: false
    }
  }
}
</script>

<style lang="scss" scoped>
/* @keyframes rotate {
  0%{
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} */
.mask{
  position: fixed;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background-color: rgba(0,0,0,.8);
  z-index: 900000;
  display: flex;
  align-items: center;
  justify-content: center;
  .loading{
    img{
      width: 100px;
      height: 100px;
    }
  }
}
</style>
